<!--
  首页，数据统计
 -->
<template>
  <div style="overflow: scroll; height: 100%; overflow-x: hidden">
    <div class="my-header row mt20">
      <div
        v-for="(item, index) in totalArr"
        :key="item.name"
        class="header-item row acen relative"
        :class="index === 0 ? '' : 'ml20'"
      >
        <div class="col ml38" v-loading="loading0">
          <div class="item-total f26">{{ item.total }}</div>
          <div class="item-name f20">{{ item.name }}</div>
        </div>
        <img :src="require('@/assets/' + item.img + '.png')" class="item-img" />
      </div>
    </div>
    <div class="specials mt20">
      <Special></Special>
    </div>
    <div class="specials mt20">
      <div class="specials mt20">
        <div style="height: 64px" class="row relative acen">
          <div class="MYH f18 b c303 ml20 mt20" style="border-left: 4px solid #42a9fd; padding: 0 10px">
            访客时间统计
          </div>
        </div>
        <div :style="{ width: '100%', height: '80%' }" ref="visitorcount"></div>
      </div>
    </div>
    <div class="row mt20">
      <div class="round">
        <div style="height: 64px" class="row relative acen">
          <div class="MYH f18 b c303 ml20" style="border-left: 4px solid #42a9fd; padding: 0 10px">
            预警类型统计
          </div>
          <div class="row abs r20">
            <el-button-group>
              <el-button plain @click="getWarnRound('week')">周</el-button>
              <el-button plain @click="getWarnRound('month')">月</el-button>
              <el-button plain @click="getWarnRound('year')">年</el-button>
            </el-button-group>
          </div>
        </div>
        <div :style="{ width: '100%', height: '80%' }" ref="round" v-loading="loading"></div>
      </div>
      <div class="square ml20">
        <div style="height: 64px" class="row relative acen">
          <div class="MYH f18 b c303 ml20 mt20" style="border-left: 4px solid #42a9fd; padding: 0 10px">
            预警时段统计
          </div>
          <div class="row abs r20">
            <el-button-group>
              <el-button plain @click="getwarnDay(1)">按日</el-button>
              <el-button plain @click="getwarnDay(2)">按周</el-button>
            </el-button-group>
          </div>
        </div>
        <div :style="{ width: '100%', height: '80%' }" ref="discount"></div>
      </div>
    </div>
    <div class="row mt20">
      <div class="round">
        <div style="height: 64px" class="row relative acen">
          <div class="MYH f18 b c303 ml20" style="border-left: 4px solid #42a9fd; padding: 0 10px">
            房屋类型统计
          </div>
        </div>
        <div :style="{ width: '100%', height: '80%' }" ref="roundtwo" v-loading="loading2"></div>
      </div>
      <div class="square ml20">
        <div style="height: 64px" class="row relative acen">
          <div class="MYH f18 b c303 ml20" style="border-left: 4px solid #42a9fd; padding: 0 10px">
            进出通行统计
          </div>
          <div class="row abs r20">
            <el-button-group>
              <el-button plain @click="getcarpass()">按日</el-button>
              <el-button plain @click="getweekpass()">按周</el-button>
            </el-button-group>
          </div>
        </div>
        <div :style="{ width: '100%', height: '80%' }" ref="discountwo" v-loading="loading4"></div>
      </div>
    </div>
    <div class="row mt20">
      <div class="round">
        <div class="MYH f18 b c303 ml20 mt20" style="border-left: 4px solid #42a9fd; padding: 0 10px">
          活动统计
        </div>
        <div :style="{ width: '100%', height: '80%' }" ref="roundthree"></div>
      </div>

      <div class="square pl20">
        <div style="height: 64px" class="row relative acen">
          <div class="row abs r20">
            <el-button-group>
              <el-button plain @click="getactive('week')">按周</el-button>
              <el-button plain @click="getactive('month')">按月</el-button>
              <el-button plain @click="getactive('year')">按年</el-button>
            </el-button-group>
          </div>
        </div>
        <div :style="{ width: '100%', height: '80%' }" ref="discounthree" v-loading="loading3"></div>
      </div>
    </div>
    <div class="row mt20">
      <div class="round">
        <div style="height: 64px" class="row relative acen">
          <div class="MYH f18 b c303 ml20" style="border-left: 4px solid #42a9fd; padding: 0 10px">
            事件办理统计
          </div>
          <div class="row abs r20">
            <el-button-group>
              <el-button plain style="background: #409eff; color: #ffffff">处理中</el-button>
              <el-button plain style="background: #4fd496; color: #ffffff">已处理</el-button>
            </el-button-group>
          </div>
        </div>
        <div :style="{ width: '100%', height: '80%' }" ref="incident" v-loading="loading"></div>
      </div>
      <div class="square ml20">
        <div style="height: 64px" class="row relative acen">
          <div class="MYH f18 b c303 ml20 mt20" style="border-left: 4px solid #42a9fd; padding: 0 10px">
            近6月事件统计
          </div>
        </div>
        <div :style="{ width: '100%', height: '80%' }" ref="incidentcount"></div>
      </div>
    </div>
    <div class="row mt20">
      <div class="round2">
        <div style="height: 64px" class="row relative acen">
          <div class="MYH f18 b c303 ml20" style="border-left: 4px solid #42a9fd; padding: 0 10px">
            投诉建议统计
          </div>
          <div class="row abs r20">
            <el-button-group>
              <el-button plain style="background: #409eff; color: #ffffff">处理中</el-button>
              <el-button plain style="background: #4fd496; color: #ffffff">已处理</el-button>
            </el-button-group>
          </div>
        </div>
        <div :style="{ width: '100%', height: '80%' }" ref="complaint" v-loading="loading"></div>
      </div>
      <div class="round2">
        <div style="height: 64px" class="row relative acen">
          <div class="MYH f18 b c303 ml20" style="border-left: 4px solid #42a9fd; padding: 0 10px">
            咨询求助统计
          </div>
          <div class="row abs r20">
            <el-button-group>
              <el-button plain style="background: #409eff; color: #ffffff">处理中</el-button>
              <el-button plain style="background: #4fd496; color: #ffffff">已处理</el-button>
            </el-button-group>
          </div>
        </div>
        <div :style="{ width: '100%', height: '80%' }" ref="resort" v-loading="loading"></div>
      </div>
        <div class="round2">
          <div class="MYH f18 b c303 ml20 mt20" style="border-left: 4px solid #42a9fd; padding: 0 10px">
            在线办理统计
          </div>
          <div :style="{ width: '100%', height: '80%' }" ref="handle"></div>
        </div>

    </div>
  </div>
</template>
<script>
import Special from './components/Special';
export default {
  components: {
    Special
  },
  data() {
    return {
      loading: true,
      loading2: true,
      loading0: true,
      loading3: true,
      loading4: true,
      totalArr: [
        { name: '总人口', total: 0, img: 'personNum' },
        { name: '总房屋', total: 0, img: 'houseNum' },
        { name: '总单位', total: 0, img: 'danweiNum' },
        { name: '总车辆', total: 0, img: 'carNum' },
        { name: '总小区', total: 0, img: 'xiaoquNum' }
      ], // 总数统计
      warnlist: [],
      homelist: [],
      warnday: [],
      warnnames: [],
      activityround: [],
      activityname: [],
      inoutname: [],
      enter: [],
      out: []
    };
  },
  created() {
    this.getTotalKind();
  },
  async mounted() {
    await this.getChartData();
    await this.getEventCon();
    await this.getHandle();
    await this.getWarnRound('week');
    await this.gethourse();

    await this.getwarnDay();
    await this.getvisitorDay();
    await this.getactive('year');
    await this.getcarpass();
    //  await this.getweekpass()
    //  this.Warndiscount()
    // this.goinRound()
    // this.activitycount()
  },
  methods: {
    //获取进出车辆统计
    getcarpass() {
      this.$api.first.car_day_statistics().then((res) => {
        if (res.code == 0) {
          this.loading4 = false;
          this.inoutname = res.data.names;
          this.enter = res.data.enter;
          this.out = res.data.out;
          this.goinRound();
        }
      });
    },
    //获取车辆周统计
    getweekpass() {
      this.$api.first.car_week_statistics().then((res) => {
        if (res.code == 0) {
          this.loading4 = false;
          this.inoutname = res.data.names;
          this.enter = res.data.enter;
          this.out = res.data.out;
          this.goinRound();
        }
      });
    },
    getWarnRound(date) {
      let params = {};
      params.dateType = date;
      this.$api.first.sys_warn_round(params).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.warnlist = res.data;
          this.warnnames = res.names;
          this.InitWarnRound(res.count);
        }
      });
    },
    getEventCon(params) {
      this.$api.first.bsbx_count(params).then((res) => {
        if (res.code === 0) {
          this.count = res.count || 0;
          this.count_ok = res.count_ok || 0;
          this.incident();
          this.complaint();
          this.resort();
        }
      });
    },
    getHandle(params) {
      this.$api.first.complaint_list(params).then((res) => {
        if (res.code === 0) {
          this.count = res.count || 0;
          this.count_ok = res.count_ok || 0;
          this.handle();
        }
      });
    },
    getChartData(params) {
      this.$api.first.bsbx_count_Halfyear(params).then((res) => {
        if (res.code === 0) {
          this.xData = [];
          this.yData = [];
          res.data.forEach((item) => {
            this.xData.push(item.month + '月');
            this.yData.push(item.count);
          });
          this.incidentcount();
        }
      });
    },
    // 获取活动统计
    getactive(date) {
      let params = {};
      params.dateType = date;
      this.$api.first.active_statistics(params).then((res) => {
        if (res.code == 0) {
          this.loading3 = false;
          this.activityround = res.data.list;
          this.activityname = [];
          this.activityname = res.data.names.map((it) => {
            return it.slice(0, 4);
          });
          // this.activityname = res.data.names;
          // this.activityname.forEach(it => {
          //     let obj=it.slice(0,4)
          //     it=obj
          // });
          this.activity();
          this.activitycount();
        }
      });
    },
    //获取预警时段
    getwarnDay(type) {
      let params = {};
      if (type) {
        params.type = type;
      } else {
        params.type = 1;
      }
      this.$api.first.warnDay(params).then((res) => {
        this.warnday = res.data;
        this.warnnames = res.names;
        this.Warndiscount();
      });
    },
    //获取访客通行
    getvisitorDay() {
      this.$api.first.visitorDay().then((res) => {
        this.visitorday = res.data.list;
        this.visitornames = res.data.names;
        this.visitorcount();
      });
    },
    // 获取房屋类型统计数据
    gethourse() {
      this.$api.first.house_type().then((res) => {
        if (res.code == 0) {
          this.loading2 = false;
          this.homelist = res.echart.data;
          this.homeRound();
        }
      });
    },
    // 获取统计数据
    getTotalKind() {
      this.$api.warn.sys_get_total().then((res) => {
        if (res.code !== 0) return;
        if (res.code == 0) {
          this.loading0 = false;
          this.totalArr = res.data;
        }
      });
    },
    // 预警类型统计初始化圆环
    InitWarnRound(perall) {
      let myChart = this.$echarts.init(this.$refs.round);

      var colorList = [
        '#409EFF',
        '#4FD496',
        '#FDB138',
        '#F5637B',
        '#B27CFD',
        '#00D6D6',
        '#FF85CE',
        '#7874F6',
        '#B3D233'
      ];
      var data = this.warnlist;
      let option = {
        color: colorList,
        title: {
          text: perall,
          subtext: '总预警数',
          textStyle: {
            color: '#000',
            fontSize: 24
          },
          textAlign: 'center',
          subtextStyle: {
            fontSize: 18,
            color: ['#000']
          },
          x: '33%',
          y: '35%'
        },
        grid: {
          bottom: 100,
          left: 100,
          right: '10%'
        },
        legend: {
          orient: 'vertical',
          right: '0',
          top: '10',
          textStyle: {
            color: '#000',
            fontSize: 10
          },

          data: data,
          formatter: function (name) {
            var total = 0;
            var target;
            for (var i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            return name + '：' + target + '人';
          }
        },
        series: [
          // 主要展示层的
          {
            radius: ['50%', '80%'],
            center: ['35%', '50%'],
            type: 'pie',
            label: {
              position: 'inner',
              formatter: '{d}%'
            },
            labelLine: {
              normal: {
                show: true,
                length: 30,
                length2: 55
              },
              emphasis: {
                show: true
              }
            },
            data: data
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    //预警时段统计折现图
    Warndiscount() {
      let myChart = this.$echarts.init(this.$refs.discount);
      let option = {
        xAxis: {
          type: 'category',
          data: this.warnnames,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },

        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        series: [
          {
            color: '#409EFF',
            data: this.warnday,
            type: 'line',
            areaStyle: {}
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    incident() {
      let myChart = this.$echarts.init(this.$refs.incident);
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        color: ['#409EFF', '#4FD496'],
        series: [
          {
            name: '处理数量',
            type: 'pie',
            radius: '50%',
            data: [this.count, this.count_ok],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    complaint() {
      let myChart = this.$echarts.init(this.$refs.complaint);
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        color: ['#f9ff40', '#4fd4ae'],
        series: [
          {
            name: '处理数量',
            type: 'pie',
            radius: '50%',
            data: [0, 2],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    resort() {
      let myChart = this.$echarts.init(this.$refs.resort);
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        color: ['#dcff40', '#d44f94'],
        series: [
          {
            name: '处理数量',
            type: 'pie',
            radius: '50%',
            data: [0, 0],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    handle() {
      let myChart = this.$echarts.init(this.$refs.handle);
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        color: ['#40ff8c', '#d45a4f', '#3869fd', '#f5dd63', '#B27CFD', '#00D6D6', '#FF85CE', '#7874F6', '#B3D233'],
        series: [
          {
            name: '办理类型',
            type: 'pie',
            radius: '50%',
            data: [{name:"低保申请",value:4},{"name":"殡葬补助申请",value:1},{"name":"特困申请",value:0},{"name":"医疗救助申请",value:0},{name:"高龄补贴申请",value:2},{"name":0}],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    //6月事件统计折现图
    incidentcount() {
      let myChart = this.$echarts.init(this.$refs.incidentcount);
      let option = {
        xAxis: {
          type: 'category',
          data: this.xData,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },

        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        series: [
          {
            color: '#409EFF',
            data: this.yData,
            type: 'line',
            areaStyle: {}
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    //访客记录
    visitorcount() {
      let myChart = this.$echarts.init(this.$refs.visitorcount);
      let option = {
        xAxis: {
          type: 'category',
          data: this.visitornames,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },

        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        series: [
          {
            color: '#409EFF',
            data: this.visitorday,
            type: 'line',
            areaStyle: {}
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    // 房屋类型统计
    homeRound() {
      let myChart = this.$echarts.init(this.$refs.roundtwo);
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        color: ['#409EFF', '#4FD496', '#FDB138', '#F5637B', '#B27CFD', '#00D6D6', '#FF85CE', '#7874F6', '#B3D233'],
        series: [
          {
            name: '房屋类型',
            type: 'pie',
            radius: '50%',
            data: this.homelist,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    // 出行通知统计
    goinRound() {
      let myChart = this.$echarts.init(this.$refs.discountwo);
      let option = {
        xAxis: {
          type: 'category',
          data: this.inoutname,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },

        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['车辆进入', '车辆离开']
        },
        series: [
          {
            name: '车辆进入',
            type: 'line',
            color: '#62D9AA',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.enter
          },
          {
            name: '车辆离开',
            type: 'line',
            color: '#0E9CFF',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.out
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    // 活动类型饼状图
    activity() {
      let myChart = this.$echarts.init(this.$refs.roundthree);
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        color: ['#409EFF', '#4FD496', '#FDB138', '#F5637B', '#B27CFD', '#00D6D6', '#FF85CE', '#7874F6', '#B3D233'],
        series: [
          {
            name: '活动类型',
            type: 'pie',
            radius: '50%',
            data: this.activityround,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    activitycount() {
      let myChart = this.$echarts.init(this.$refs.discounthree);
      let option = {
        xAxis: {
          type: 'category',
          data: this.activityname,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            data: this.activityround,
            type: 'bar',
            barWidth: 20, // 条宽
            color: '#409EFF',
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: 'black',
                    fontSize: 16
                  }
                }
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    }
  }
};
</script>
<style lang="css" scoped>
.header-item {
  width: 320px;
  height: 150px;
  background: #ffffff;
}
.item-total {
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #303030;
}
.item-name {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #303030;
}
.ml38 {
  margin-left: 38px;
}
.item-img {
  width: 80px;
  height: 80px;
  position: absolute;
  right: 28px;
}
.specials {
  width: 100%;
  height: 356px;
  background: #ffffff;
}
.round {
  width: 504px;
  height: 305px;
  background: #ffffff;
}
.round2{
  width: 564px;
  height: 305px;
  background: #ffffff;
}
.square {
  width: 1156px;
  height: 305px;
  background: #ffffff;
}
.sbtn {
  width: 70px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.container {
  overflow: visible;
}
</style>
